<script>
	import Vuex from 'vuex';
	
	export default {
		// 当uni-app 初始化完成时触发（全局只触发一次）
		onLaunch: function () {
			console.log('应用初始化完成!');
			console.log('应用已经启动!');
			// 音频播放结束时触发该事件
			this.audio.onEnded(() => {
				console.log('发生音频播放结束事件 - app.vue');
				// 单曲循环模式
				if (this.playMode === 'single') {
					// 直接播放即可
					this.playAudio()
				} else if(this.playMode === 'list') {
					// 列表循环模式
					if (this.playIndex === this.playHistoryData.length - 1) {
						this.setPlayIndex(0);	// 如果是最后一首就播放第0首
					} else {
						this.setPlayIndex(this.playIndex + 1);	// 否则播放下一曲
					}
					this.setPlayDataAndPlay();
				} else if (this.playMode === 'random') {
					// 随机播放模式
					this.setPlayIndex(Math.floor(Math.random()*(this.playHistoryData.length)));	// 取可用的随机数
					this.setPlayDataAndPlay();
				}
			})
		},
		onShow: function () {
			console.log('触发"App Show"事件');
			console.log('你的应用已经切换到前台');
		},
		onHide: function () {
			console.log('触发"App Hide"事件');
			console.log('你的应用已经切换到后台');
		},
		computed: {
			...Vuex.mapState([
				'audio',
				'playHistoryData',
				'playMode',
				'playIndex'
			])
		},
		methods: {
			...Vuex.mapActions([
				'setPlayDataAndPlay'
			]),
			...Vuex.mapMutations([
				'playAudio',
				'setPlayIndex'
			])
		}
	}
</script>

<style>
	/* 所有页面的公共 style  */
	
	/* 引入官方的样式集 */
	@import "./common/uni.css";
	
	/* 标题样式 */
	.uni-title {
		text-align: left;
		margin-left: 30upx;
		font-weight: bold;
		font-size: 40upx;
	}

	/* class="seven" 700宽度, 居中对齐 */
	.seven {
		width: 700upx;
		margin: 0 auto;
	}
</style>